<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="角色名称">
                    <el-col :span="6"><el-input v-model="form.name"></el-input></el-col>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-col :span="6"><el-input v-model="form.description"></el-input></el-col>
                </el-form-item>
                <el-form-item label="角色保存">
                    <el-col :span="6"><el-input v-model="form.display_name"></el-input></el-col>
                </el-form-item>
                <el-form-item label="权限选择">
                    <el-checkbox-group v-model="form.perms">
                        <el-row v-for="(item,index) in permissions">
                            <el-col :span="2">{{index}}</el-col>
                            <el-col :span="20">
                                    <el-checkbox v-for="permission in item" :label="permission.id" name="perms">{{permission.name}}</el-checkbox>
                            </el-col>
                        </el-row>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="活动性质" prop="type">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                form: {
                    name: '',
                    display_name: '',
                    description: '',
                    type: [],
                    perms: []
                },
                permissions:{

                }
            }
        },
        created(){
            const self = this;
            self.url = self.apiUrl + 'role/' + self.$route.query.id;
            self.$axios.get(self.url).then((res) => {
                console.log(res.data);
                this.form = res.data.roles;
                this.permissions = res.data.permissions;
            })
        },
        methods: {
            onSubmit() {
                console.log(this.form);
                this.$message.success('提交成功！');
            }
        }
    }
</script>
